import DrawerFooter from '@/components/DrawerFooter';
import { Button, Form, TimePicker2, NumberPicker } from '@alifd/next';
import { t } from '@lingui/macro';
import React, { useEffect, useState } from 'react';

const FormItem = Form.Item;

function ChargeForm({ data: origin, onSubmit, onCancel }) {
  const [data, setData] = useState('');

  useEffect(() => {
    const params = origin?.values;
    setData(params);
  }, []);

  const handleTimePicker = (e, v) => {
    setData((pre) => {
      const p = { ...pre };
      p.date = v;
      return p;
    });
  };

  const handlePayEndTime = (v) => {
    setData((pre) => {
      const p = { ...pre };
      p.payEndTime = v;
      return p;
    });
  };

  const handleNotGroupPayEndTime = (v) => {
    setData((pre) => {
      const p = { ...pre };
      p.notGroupPayEndTime = v;
      return p;
    });
  };

  const handleOnSubmit = (v, e) => {
    if (!_.isEmpty(e)) {
      return;
    }
    onSubmit(data);
  };


  return (
    <Form
      labelAlign="top"
      fullWidth
      value={data}
    >
      <FormItem
        label={t`班次时间`}
        name="date"
        required
        useLabelForErrorMessage
      >
        <TimePicker2 style={{ width: '100%' }} format="HH:mm" minuteStep={5} onChange={handleTimePicker} />
      </FormItem>
      <FormItem
        label={t`下单截止时间(无空位时/单位分)`}
        name="payEndTime"
        required
        useLabelForErrorMessage
      >
        <NumberPicker style={{ width: '100%' }} min={0} onChange={handlePayEndTime} />
      </FormItem>
      <FormItem
        label={t`下单截止时间(有空位时/单位分)`}
        name="notGroupPayEndTime"
        required
        useLabelForErrorMessage
      >
        <NumberPicker style={{ width: '100%' }} min={0} onChange={handleNotGroupPayEndTime} />
      </FormItem>
      <DrawerFooter>
        <FormItem>
          <Form.Submit validate type="primary" onClick={handleOnSubmit}>{t`保存`}</Form.Submit>
          <Button style={{ marginLeft: 8 }} onClick={onCancel}>{t`取消`}</Button>
        </FormItem>
      </DrawerFooter>
    </Form>
  );
}

export default ChargeForm;
